import React, {
  useEffect,
  useRef,
  useState,
  useCallback,
  useMemo,
  Fragment,
  useImperativeHandle,
  forwardRef,
  ReactElement,
} from 'react';
import { Button, Space } from 'antd';
import { PlayCircleOutlined, PoweroffOutlined } from '@ant-design/icons';
import './index.less';

interface LineStyleType {
  fill: string;
  stroke: string;
  strokeWidth: number;
}

interface LineItemType {
  name: string;
  path: any[];
  lineStyle: LineStyleType;
}

export default () => {
  const [lines, setLines] = useState<LineItemType[]>([]);
  const beginPointRef = useRef<HTMLDivElement | null>(null);
  const endPointRef = useRef<HTMLDivElement | null>(null);
  const svgRef = useRef<SVGSVGElement | null>(null);

  const getElementPosition = (e: HTMLDivElement | null) => {
    var x = 0,
      y = 0,
      width = 0,
      height = 0;
    if (e) {
      x = e.offsetLeft;
      y = e.offsetTop;
      width = e.scrollWidth;
      height = e.scrollHeight;
      // e = e.offsetParent;
    }
    return { x, y, width, height };
  };

  const svgChart = () => {
    let beginPoint = getElementPosition(beginPointRef.current); // 起点
    let endPoint = getElementPosition(endPointRef.current); // 终点dom
    let lines: LineItemType[] = [];
    for (let i = 0; i < 12; i++) {
      lines.push({
        name: `path${i}`,
        path: [
          [endPoint.x, endPoint.y],
          [-65 + 50 * i, 180],
          [-65 + 50 * i, 28],
          [beginPoint.x, beginPoint.y],
        ],
        lineStyle: {
          fill: 'transparent',
          stroke: '#006ecf',
          strokeWidth: 1,
        },
      });
      setLines(lines);
    }
  };

  useEffect(() => {
    svgChart();
    // console.log(beginPoint);
  }, []);

  const pauseStart = (play: Boolean) => {
    if (play) {
      svgRef?.current?.unpauseAnimations();
    } else {
      svgRef?.current?.pauseAnimations();
    }
  };

  return (
    <div>
      <Space>
        <Button
          type="primary"
          icon={<PlayCircleOutlined />}
          onClick={() => {
            pauseStart(true);
          }}
        >
          播放
        </Button>
        <Button
          icon={<PoweroffOutlined />}
          onClick={() => {
            pauseStart(false);
          }}
        >
          暂停
        </Button>
      </Space>
      <div className="flyball-outerbox">
        <div className="flyball-box">
          <div className="flyball-arthTurn">
            <span className="flyball-shade"></span>
            <svg width="100%" height="100%" ref={svgRef} version="1.1">
              <defs>
                <pattern
                  id="imgpattern"
                  x="0"
                  y="0"
                  width="40"
                  height="40"
                  style={{ position: 'absolute', zIndex: -1, left: '-20px' }}
                >
                  <image
                    width="40"
                    height="40"
                    xlinkHref=""
                  />
                </pattern>
              </defs>
              {lines.map((d, indexs) => {
                let path = [] as any;
                let index = indexs + 1;
                d.path.forEach((p, i) => {
                  switch (i) {
                    case 0:
                      p = `M${p[0]},${p[1]}`;
                      break;
                    case 1:
                      p = `C${p[0]},${p[1]}`;
                      break;
                    case 2:
                      p = `${p[0]},${p[1]}`;
                      break;
                    case 3:
                      p = `${p[0]},${p[1]}`;
                      break;
                  }
                  path.push(p);
                });
                path = path.join(' ');
                const {
                  fill = 'transparent',
                  stroke = '#000',
                  strokeWidth = 2,
                } = d.lineStyle || {};
                let dur = '7s';
                let animatTime = 0; // Math.floor(Math.random() * 12) / 10;
                if (index === 2 || index === 5 || index === 8 || index === 11) {
                  animatTime = 1;
                } else if (
                  index === 3 ||
                  index === 6 ||
                  index === 9 ||
                  index === 12
                ) {
                  animatTime = 2;
                } else {
                  animatTime = 1;
                }
                return (
                  <Fragment key={indexs.toString()}>
                    <path
                      fill={fill}
                      stroke={stroke}
                      strokeDasharray="3,3"
                      d={path}
                      strokeWidth={strokeWidth}
                      className="path"
                    />
                    <rect
                      x="-20"
                      y="-20"
                      width="40"
                      height="40"
                      fill="url(#imgpattern)"
                    >
                      <animateMotion
                        path={path}
                        begin={animatTime}
                        dur={dur}
                        repeatCount="indefinite"
                      />
                    </rect>
                  </Fragment>
                );
              })}
            </svg>
            <div className="begin-point" ref={beginPointRef}></div>
            <div className="end-point" ref={endPointRef}></div>
          </div>
        </div>
      </div>
    </div>
  );
};
